<#macro commonStyle>
    <#import "spring.ftl" as spring>
<#-- favicon -->
    <link rel="icon" href="${request.contextPath}/static/favicon.ico" />

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
</#macro>

<#macro commonScript>
    <script src="/static/js/jquery-3.6.4.min.js"></script>
    <script src="/static/js/jquery-migrate.min.js"></script>
    <script src="/static/js/jquery.cookie.js"></script>
    <script src="/static/js/common.js?new"></script>
    <script src="/static/js/bootstrap.min.js"></script>
</#macro>
import
<#macro indexQueryCheck queryItem addQueryItem clazz>
     <#if queryItem??>
         <#if addQueryItem??>
             <#assign flag = true/>
             <#list addQueryItem as aqi>
                 <#if queryItem?keys?seq_contains(aqi[0]) && queryItem[aqi[0]] == aqi[1] ><#else>
                    <#assign flag = false/>
                    <#break />
                 </#if>
             </#list>
             <#if flag>${clazz}</#if>
         </#if>
    </#if>
</#macro>

<#macro indexQueryUrl queryItem  addQueryItem removeQueryItem>
    <#assign str = ""/>
    <#if addQueryItem??>
        <#list addQueryItem as aqi>
             <#if str=="" >
                <#assign str="/works/index?"+aqi[0]+"="+aqi[1] />
             <#else>
                <#assign str=str+"&"+aqi[0]+"="+aqi[1] />
             </#if>
        </#list>
    </#if>

    <#if queryItem??>
        <#list queryItem?keys as key>
            <#if removeQueryItem??>
                <#if removeQueryItem?seq_contains(key)>
                <#else>
                     <#if str=="" >
                        <#assign str="/works/index?"+key+"="+queryItem[key] />
                      <#else>
                        <#assign str=str+"&"+key+"="+queryItem[key] />
                    </#if>
                </#if>
            <#else>
                <#if str=="" >
                  <#assign str="/works/index?"+key+"="+queryItem[key] />
               <#else>
                   <#assign str=str+"&"+key+"="+queryItem[key] />
               </#if>

            </#if>
        </#list>
    </#if>
    ${str}
</#macro>


<#macro exQueryUrl queryItem  addQueryItem removeQueryItem>
    <#assign str = ""/>
    <#if addQueryItem??>
        <#list addQueryItem as aqi>
            <#if str=="" >
                <#assign str="/exhibition/exhibition?"+aqi[0]+"="+aqi[1] />
            <#else>
                <#assign str=str+"&"+aqi[0]+"="+aqi[1] />
            </#if>
        </#list>
    </#if>

    <#if queryItem??>
        <#list queryItem?keys as key>
            <#if removeQueryItem??>
                <#if removeQueryItem?seq_contains(key)>
                <#else>
                    <#if str=="" >
                        <#assign str="/exhibition/exhibition?"+key+"="+queryItem[key] />
                    <#else>
                        <#assign str=str+"&"+key+"="+queryItem[key] />
                    </#if>
                </#if>
            <#else>
                <#if str=="" >
                    <#assign str="/exhibition/exhibition?"+key+"="+queryItem[key] />
                <#else>
                    <#assign str=str+"&"+key+"="+queryItem[key] />
                </#if>

            </#if>
        </#list>
    </#if>
    ${str}
</#macro>

<#macro commonHeader pageName menus i18n>
    <style>
        .user-logined{
            display: none;
        }
        .search-box{
            height: 48px;
            width: 200px;
            position: absolute;
            background: #fff;
            box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.1);
            display: flex;
            align-items: center;
            justify-content: space-between;
            display: none;
            z-index: 999;
        }
        .close-btn,.search-btn{
            width: 68px;
            height: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .dropdown-menu > li > a{
            padding: 10px;
        }

        .search-box-filter{
            height: 48px;
            width: 200px;
            line-height: 48px;
            text-align: center;
            border-right: 1px #eee solid;
            cursor: pointer;
        }

    </style>
    <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main-menu">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a href="#" class="btn btn-icon-only navbar-toggle"><i class="fa fa-user"></i></a>
                <a class="btn btn-icon-only navbar-toggle" data-toggle="collapse" data-target=".form-wrap"><i class="fa fa-search"></i></a>
                <a class="navbar-brand" href="/">
                    <div class="brand-logo"><img src="/static/img/logo.png"/>
                    </div>
                </a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <li class="collapse navbar-collapse" id="main-menu">
                <div class="nav-bar-btn">

                    <a href="#@"  class="dropdown btn btn-icon-only btn-nav btn-nav-desktop dropdown-toggle user-logined" data-toggle="dropdown"><i class="fa fa-user"></i> <span class="user-name">注册/登录</span></a>
                    <ul class="dropdown-menu">
                        <li onclick="checkLogin('/user/setting')">
                            <a>个人设置</a></li>
                        <li onclick="checkLogin('/user/order')"><a>我的订单</a></li>
                        <li onclick="checkLogin('/user/cart')"><a>我的购物车</a></li>
                        <li onclick="checkLogin('/user/history')"><a>我的足迹</a></li>
                        <li onclick="logout()"><a>登出</a></li>
                    </ul>

                    <div onclick="checkLogin('/user/setting')" class="user-login btn btn-icon-only btn-nav btn-nav-desktop" ><i class="fa fa-user"></i> <span class="user-name">注册/登录</span></div>

                    <a class="btn btn-icon-only btn-nav btn-nav-desktop" id="btn-lang">EN</a>

                    <a class="btn btn-icon-only btn-nav btn-nav-desktop btn-search-top"><i class="fa fa-search"></i> 搜索</a>
                </div>
                <div class="search-box">
                    <div class="search-box-filter">艺术品</div>
                    <input id="form-search-input" type="text" class="form-control" style="border: 0px; color: #333;" name="search-input"  value="搜索"  onfocus="this.value='';">
                    <div class="search-btn" ><i class="fa fa-search"></i></div>
                    <div class="close-btn" ><i class="fa fa-close"></i></div>


                </div>
                <ul class="nav navbar-nav navbar-right">
                                        <#list menus.data as items>

                                            <#if (items.children?size > 0 )>
                                                <li class="dropdown">
                                                <a href="${items.linkUrl!''}"  class="dropdown-toggle <#if items.name == pageName>active</#if> NavA" data-toggle="dropdown">

                                                    <#if i18n=='zh-CN'>
                                                        ${items.name!''}
                                                    <#else>
                                                        ${items.shareTitle!''}
                                                    </#if>
                                                    <b class="caret"></b></a>
                                                <ul class="dropdown-menu">
                                                    <#list items.children as item>
                                                          <li><a href="${item.linkUrl!''}">
                                                                              <#if i18n=='zh-CN'>
                                                                                  ${item.name!''}
                                                                              <#else>
                                                                                  ${item.shareTitle!''}
                                                                              </#if>


                                                              </a></li>
                                                    </#list>
                                                </ul>
                                            <#else>
                                                <li>
                                                    <a href="${items.linkUrl!''}" class="<#if items.name == pageName>active</#if> NavA">
                                                        <#if i18n=='zh-CN'>
                                                            ${items.name!''}
                                                        <#else>
                                                            ${items.shareTitle!''}
                                                        </#if>
                                                    </a>
                                                </li>
                                            </#if>


<#--                                               <a href="${items.url}" class="<#if items.name == pageName>active</#if> NavA">-->
<#--                                                   <span>${items.name}</span>-->
<#--                                               </a>-->
<#--                                            </li>-->
                                        </#list>
<#--                    <li>-->
<#--                        <a href="/">首页</a>-->
<#--                    </li>-->
<#--                    <li>-->
<#--                        <a href="/works/index">艺术品商店</a>-->
<#--                    </li>-->
<#--                    <li>-->
<#--                        <a href="/exhibition/index?expoNo=1352203149716377600">博览会</a>-->
<#--                    </li>-->
<#--                    <li class="dropdown">-->
<#--                        <a href="/exhibition/index" class="dropdown-toggle" data-toggle="dropdown">博览会 <b class="caret"></b></a>-->
<#--                        <ul class="dropdown-menu">-->
<#--                            <li><a href="/exhibition/exhibition">参展商</a>-->
<#--                            </li>-->
<#--                            <li><a href="/exhibition/schedule">日程安排</a>-->
<#--                            </li>-->
<#--                            <li><a href="/exhibition/partners">合作伙伴</a>-->
<#--                            </li>-->
<#--                            <li><a href="/exhibition/visit">参观信息</a>-->
<#--                            </li>-->
<#--&lt;#&ndash;                            <li><a href="/exhibition/about">关于我们</a>&ndash;&gt;-->
<#--                            </li>-->
<#--                            <li><a href="/exhibition/apply">参展申请</a>-->
<#--                            </li>-->
<#--                        </ul>-->
<#--                    </li>-->

<#--                    <li>-->
<#--                        <a href="/exhibition/online">线上展览</a>-->
<#--                    </li>-->

<#--                    <li>-->
<#--                        <a href="/artist/index">艺术家</a>-->
<#--                    </li>-->

<#--                    <li>-->
<#--                        <a href="/news/index">艺术资讯</a>-->
<#--                    </li>-->

<#--                    <li>-->
<#--                        <a href="/events/index">活动中心</a>-->
<#--                    </li>-->
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <div class="container">
            <div class="form-wrap collapse">
                <div id="form-search" >
                    <div class="form-group">
                        <input id="form-search-input" type="text" class="form-control" name="search-input" value="搜索"  onfocus="this.value='';">
                        <button type="submit"><i class="fa fa-search"></i>
                        </button>
                        <button type="reset" data-toggle="collapse" data-target=".form-wrap"><i class="fa fa-close"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <!-- /.container-fluid -->
    </nav>

    <div class="side-bar-nav">
        <#if i18n=='zh-CN'>
            <a class="side-bar-nav-items" onclick="checkLogin('/user/cart')">
                <img src="/static/img/icon-cart.png"/>
                <span>购物车</span>
            </a>
            <a class="side-bar-nav-items" onclick="checkLogin('/user/order')">
                <img src="/static/img/icon-order.png"/>
                <span>订单</span>
            </a>
            <a class="side-bar-nav-items" id="chartBtn" >
                <img src="/static/img/icon-client.png"/>
                <span>客服</span>
            </a>
            <a class="side-bar-nav-items" onclick="checkLogin('/user/history')">
                <img src="/static/img/icon-history.png"/>
                <span>足迹</span>
            </a>
            <a class="side-bar-nav-items" id="goTop">
                            <img src="/static/img/icon-top.png"/>
                            <span>返回顶部</span>
                        </a>
        <#else>
            <a class="side-bar-nav-items" id="goTop">
                <img src="/static/img/icon-top.png"/>
                <span></span>
            </a>
            <a class="side-bar-nav-items" onclick="checkLogin('/user/cart')">
                <img src="/static/img/icon-cart.png"/>
                <span>Cart</span>
            </a>
            <a class="side-bar-nav-items" onclick="checkLogin('/user/order')">
                <img src="/static/img/icon-order.png"/>
                <span>Order</span>
            </a>
            <a class="side-bar-nav-items" id="chartBtn" >
                <img src="/static/img/icon-client.png"/>
                <span>Client</span>
            </a>
            <a class="side-bar-nav-items" onclick="checkLogin('/user/history')">
                <img src="/static/img/icon-history.png"/>
                <span>History</span>
            </a>
        </#if>

    </div>
</#macro>


<#macro commonHeaderNav pageName menus>


    <header id="header">

        <div class="H">
            <div class="header_top">
                <div class="logo">
                    <a href="/"><img src="/static/img/header/logo.png" alt=""></a>
                </div>
                <div class="search">
                    <div class="search_Box">
                        <div class="choices">
                            <span class="choosed">作品 <i class="fa fa-caret-down"></i></span>
                            <div class="choicebox">
                                <span class="choice ">作品</span>
                                <span class="choice">艺术家</span>
                            </div>
                        </div>
                        <img class="chooseicon"
                             src="/static/svg/svg_file.svg?path=/content/image/search.svg&rgb=51,51,51" alt="">
                        <input type="password" style="display:none;" />
                        <input type="text" autocomplete="off" name="HeaderInput" id="HeaderInput"
                               placeholder="搜索感兴趣的关键字" />
                    </div>
                </div>
                <div class="content_header">
                    <div class="content_Box">
                        <div class="login_next login">
                            <a href="javascript:checkLogin('/')">
                                <img src="/static/img/header_avatar_default.png"
                                     class="Img small"></a>
                            <a href="javascript:checkLogin('/')" class="icon_name ">登录/注册</a>

                        </div>
                        <div class="login_next uesr">
                            <a href="javascript:checkLogin('/user/setting')">
                                <img src="/static/img/header_avatar_default.png"
                                     class="Img small"></a>
                            <a href="javascript:checkLogin('/user/setting')" class="icon_name ov"></a>

                            <div class="login_hover">
                                <i></i>
                                <ul>
                                    <li>
                                        <a href="javascript:checkLogin('/user/setting')">
                                            个人设置
                                        </a>
                                    </li>

                                    <li><a href="javascript:checkLogin('/user/order')">我的订单</a></li>
                                    <li><a href="javascript:checkLogin('/user/cart')">购物车</a></li>
                                    <li><a href="javascript:checkLogin('/user/history')">我的足迹</a></li>
                                    <li><a href="javascript:logout()">退出</a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="MyOrder">
                            <a href="javascript:checkLogin('/user/order')">我的订单</a>
                        </div>

                        <div class="Service">
                            <a href="http://uclient.yunque360.com/frame.html?company_id=cjmpk62q5i7lau">在线客服</a>
                        </div>
                        <div class="download lodeJ">
                            <a href="javascript:;">手机版</a>
                            <div class="er">
                                <h4>使用手机扫一扫</h4>
                                <img src="img/code.jpg" alt="">
                                <span>购买咨询：400-605-7033</span>
                            </div>
                            <i></i>
                        </div>
                    </div>
                </div>

            </div>
        </div>

        <div class="header_bottom">
            <div class="ContentheaderB">
                <div class="WClass">
                    <div class="allClassification">
                        <h2>所有分类</h2>
                        <ul class="classificationList">
                            <li><a href="category.html">分类</a></li>
                            <li><a href="category.html">分类</a></li>
                            <li><a href="category.html">分类</a></li>
                            <li><a href="category.html">分类</a></li>
                            <li><a href="category.html">分类</a></li>
                            <li><a href="category.html">分类</a></li>
                        </ul>
                    </div>
                </div>
                <div class="nav">


                    <#list menus as items>

                    <div class="ContentNav">
                        <#if items.children?? >
                            <ul class="YSPSlider">
                                <#list items.children as item>
                                    <li>
                                        <a href="${item.url}">${item.name}</a>
                                    </li>
                                </#list>
                            </ul>
                        </#if>
                           <a href="${items.url}" class="<#if items.name == pageName>active</#if> NavA">
                               <span>${items.name}</span>
                           </a>
                        </div>
                    </#list>


                </div>

            </div>
        </div>
    </header>


</#macro>

<#macro commonLeft pageName >
    <!-- Left side column. contains the logo and sidebar -->
    <aside class="main-sidebar">
        <!-- sidebar: style can be found in sidebar.less -->
        <section class="sidebar">
            <!-- sidebar menu: : style can be found in sidebar.less -->
            <ul class="sidebar-menu">
                <li class="header">${I18n.system_nav}</li>
                <li class="nav-click <#if pageName == "index">active</#if>" ><a href="${request.contextPath}/"><i class="fa fa-circle-o text-aqua"></i><span>${I18n.job_dashboard_name}</span></a></li>
                <li class="nav-click <#if pageName == "jobinfo">active</#if>" ><a href="${request.contextPath}/jobinfo"><i class="fa fa-circle-o text-yellow"></i><span>${I18n.jobinfo_name}</span></a></li>
                <li class="nav-click <#if pageName == "joblog">active</#if>" ><a href="${request.contextPath}/joblog"><i class="fa fa-circle-o text-green"></i><span>${I18n.joblog_name}</span></a></li>
                <#if Request["XXL_JOB_LOGIN_IDENTITY"].role == 1>
                    <li class="nav-click <#if pageName == "jobgroup">active</#if>" ><a href="${request.contextPath}/jobgroup"><i class="fa fa-circle-o text-red"></i><span>${I18n.jobgroup_name}</span></a></li>
                    <li class="nav-click <#if pageName == "user">active</#if>" ><a href="${request.contextPath}/user"><i class="fa fa-circle-o text-purple"></i><span>${I18n.user_manage}</span></a></li>
                </#if>
                <li class="nav-click <#if pageName == "help">active</#if>" ><a href="${request.contextPath}/help"><i class="fa fa-circle-o text-gray"></i><span>${I18n.job_help}</span></a></li>
            </ul>
        </section>
        <!-- /.sidebar -->
    </aside>
</#macro>

<#macro commonControl >
    <!-- Control Sidebar -->
    <aside class="control-sidebar control-sidebar-dark">
        <!-- Create the tabs -->
        <ul class="nav nav-tabs nav-justified control-sidebar-tabs">
            <li class="active"><a href="#control-sidebar-home-tab" data-toggle="tab"><i class="fa fa-home"></i></a></li>
            <li><a href="#control-sidebar-settings-tab" data-toggle="tab"><i class="fa fa-gears"></i></a></li>
        </ul>
        <!-- Tab panes -->
        <div class="tab-content">
            <!-- Home tab content -->
            <div class="tab-pane active" id="control-sidebar-home-tab">
                <h3 class="control-sidebar-heading">近期活动</h3>
                <ul class="control-sidebar-menu">
                    <li>
                        <a href="javascript::;">
                            <i class="menu-icon fa fa-birthday-cake bg-red"></i>
                            <div class="menu-info">
                                <h4 class="control-sidebar-subheading">张三今天过生日</h4>
                                <p>2015-09-10</p>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="javascript::;">
                            <i class="menu-icon fa fa-user bg-yellow"></i>
                            <div class="menu-info">
                                <h4 class="control-sidebar-subheading">Frodo 更新了资料</h4>
                                <p>更新手机号码 +1(800)555-1234</p>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="javascript::;">
                            <i class="menu-icon fa fa-envelope-o bg-light-blue"></i>
                            <div class="menu-info">
                                <h4 class="control-sidebar-subheading">Nora 加入邮件列表</h4>
                                <p>nora@example.com</p>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="javascript::;">
                            <i class="menu-icon fa fa-file-code-o bg-green"></i>
                            <div class="menu-info">
                                <h4 class="control-sidebar-subheading">001号定时作业调度</h4>
                                <p>5秒前执行</p>
                            </div>
                        </a>
                    </li>
                </ul>
                <!-- /.control-sidebar-menu -->
            </div>
            <!-- /.tab-pane -->

            <!-- Settings tab content -->
            <div class="tab-pane" id="control-sidebar-settings-tab">
                <form method="post">
                    <h3 class="control-sidebar-heading">个人设置</h3>
                    <div class="form-group">
                        <label class="control-sidebar-subheading"> 左侧菜单自适应
                            <input type="checkbox" class="pull-right" checked>
                        </label>
                        <p>左侧菜单栏样式自适应</p>
                    </div>
                    <!-- /.form-group -->

                </form>
            </div>
            <!-- /.tab-pane -->
        </div>
    </aside>
    <!-- /.control-sidebar -->
    <!-- Add the sidebar's background. This div must be placed immediately after the control sidebar -->
    <div class="control-sidebar-bg"></div>
</#macro>

<#macro commonFooter menus friendLink copyright i18n>
    <footer>
        <div class="banner">
            <div class="row clearfix" style="margin: 0px">
                <ul>
                    <#list menus.data as items>
                    <li>
                        <strong> <#if i18n=='zh-CN'>
                                ${items.name!''}
                            <#else>
                                ${items.shareTitle!''}
                            </#if></strong>
                        <#if (items.children?size > 0 ) >
                                <#list items.children as item>

                                    <#if ( item.linkUrl!="")>
                                            <a href="${item.linkUrl}">

                                                <#if i18n=='zh-CN'>
                                                    ${item.name!''}
                                                <#else>
                                                    ${item.shareTitle!''}
                                                </#if>
                                            </a>
                                        <#else>
                                            <a href="/cms/page?pageNo=${item.pageNo}">
                                                <#if i18n=='zh-CN'>
                                                    ${item.name!''}
                                                <#else>
                                                    ${item.shareTitle!''}
                                                </#if>
                                            </a>
                                    </#if>
                                </#list>
                        </#if>
                    </li>
                    </#list>

                </ul>
                <div class="app_download">
                    <div class="QRcode">
                        <div class="android">
                             <img class="blockImg" src="/static/img/app.jpg">
                             <img src="/static/img/Android-app1.png" alt="android">
                              <p class="saoyisao">扫一扫，下载app</p>
                        </div>
                        <div class="android">
                            <img class="blockImg" src="/static/img/app.jpg">
                            <img src="/static/img/iphone-app1.png" alt="android">
                             <p class="saoyisao">扫一扫，下载app</p>
                        </div>
                         <div class="apple">
                             <img class="blockImg" src="/static/img/qrwx.png">
                             <img src="/static/img/weixin-a1.png" alt="apple">
                                <p class="saoyisao">扫一扫，下载app</p>
                          </div>
                          <div class="android">
                               <img class="blockImg" src="/static/img/code.png">
                              <img src="/static/img/weixin1.png" alt="android">
                               <p class="saoyisao">扫一扫，下载app</p>
                          </div>
                    </div>
                </div>
            </div>

            <p class="thrid">${copyright.copyright} |  <a href="/cms/link">友情链接</a>
<#--            <p class="thrid">-->

<#--                <i id="footerLink" class="fa fa-sort-desc"></i>-->
<#--                <strong>友情链接</strong>-->
<#--                <span>-->
<#--                    <#list friendLink as items>-->
<#--                        <a href="${items.name}" target="_blank">${items.name}</a>-->
<#--                    </#list>-->
<#--                </span>-->
<#--            </p>-->
        </div>
    </footer>

    <script>

        (function(y, un, q, u, e) {
            window[un] =
                window[un] ||
                function(y) {
                    window[un].company_id = window[un].company_id || y;

                };
            u = document.createElement("script");
            u.src = q + "?v=" + new Date().getUTCDate();
            u.async = true;
            e = document.getElementsByTagName("script")[0];
            e.parentNode.insertBefore(u, e);
        })(window,"_YUNQUE","//dist.yunque360.com/bundle.js");
        _YUNQUE("cjmpk62q5i7lau");

    </script>
  <#-- cnzz统计 -->
    <script type="text/javascript" src="https://s4.cnzz.com/z_stat.php?id=1279756245&web_id=1279756245"></script>
  <#--  百度统计 -->
<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?bed0b3c0ffa2448cfcf198409b51df5d";
  var s = document.getElementsByTagName("script")[0];
  s.parentNode.insertBefore(hm, s);
})();
</script>

</#macro>